<template>
    <div>
      <button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
      <div id="myprintDom" class="nocalssvw">
        <div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
          <p class="print-title">干 部 任 免 审 批 表</p>
          <table border="1" class="primt-table print-tableOne">
            <thead>
              <tr>
                <td style="width: 68px;" class="pt">姓名</td>
                <td style="width: 58px;">{{ item.xingming }}</td>
                <td style="width: 68px;" class="pt">性别</td>
                <td style="width: 68px;" class="ptw84">{{ item.xingbie }}</td>
                <td style="width: 68px;" class="pt">出生年月</td>
                <td style="width: 68px;">{{ item.csny }}</td>
                <td rowspan="4" colspan="2" style="width: 120px;">
                  <img style="width: 120px;height: 180px;" src="" alt="">
                </td>
              </tr>
              <tr>
                <td class="pt">民族</td>
                <td>{{ item.minzu_mc }}</td>
                <td class="pt">籍贯</td>
                <td>{{ item.jiguan }}</td>
                <td class="pt">出生地</td>
                <td>{{ item.chushengdi }}</td>
              </tr>
              <tr>
                <td class="pt">入党 时间</td>
                <td>{{ item.rdsj }}</td>
                <td class="pt">参加工 作时间</td>
                <td>{{ item.cjgzsj }}</td>
                <td class="pt">健康状况</td>
                <td>{{ item.jiankang }}</td>
              </tr>
              <tr>
                <td class="pt">专业技 术职务</td>
                <td colspan="2">{{ item.zyjszw }}</td>
                <td class="pt">熟悉专业 有何专长</td>
                <td colspan="2">{{ item.zhuanyejishu }}</td>
              </tr>
              <tr>
                <td class="pt" rowspan="2">学历 学位</td>
                <td class="pt">全日制 教育</td>
                <td colspan="2">{{ item.qrzxl_zg }}</td>
                <td class="pt">毕业院校 系及专业</td>
                <td colspan="3">{{ item.qrzxlxx_zg }}</td>
              </tr>
              <tr>
                <td class="pt">在职 教育</td>
                <td colspan="2">{{ item.qrzxw_zg }}</td>
                <td class="pt">毕业院校 系及专业</td>
                <td colspan="3">{{ item.qrzxwxx_zg }}</td>
              </tr>
              <tr>
                <td class="pt" colspan="2">现任职务</td>
                <td colspan="6"></td>
              </tr>
              <tr>
                <td class="pt" colspan="2">拟任职务</td>
                <td colspan="6"></td>
              </tr>
              <tr>
                <td class="pt" colspan="2">拟免职务</td>
                <td colspan="6"></td>
              </tr>
              <tr style="height: 430px;">
                <td class="" style="line-height: 150px;">简 <br> 介</td>
                <td colspan="7">
                  <div class="jj">
                    <p>{{ item.jianli }}</p>
                  </div>
                </td>
              </tr>
            </thead>
          </table>
          <div style="page-break-before:always;">
            <br />
            <br />
            <table border="1" class="primt-table print-tableTwo">
              <thead>
                <tr>
                  <td style="writing-mode:vertical-lr; height: 76px;" class="ptw48">奖惩情况</td>
                  <td colspan="7" class="left">
                     {{ item.jl }}
                  </td>
                </tr>
                <tr>
                  <td style="writing-mode:vertical-lr; height: auto;">年度考 <br> 核结果</td>
                  <td colspan="7">{{ item.kaohe }}</td>
                </tr>
                <tr>
                  <td style="writing-mode:vertical-lr; height: 76px;">任免理由</td>
                  <td colspan="7"></td>
                </tr>
                <tr>
                  <td rowspan="9">
                    家<br>庭<br>主<br>要<br>成<br>员<br>及<br>重<br>要<br>社<br>会<br>关<br>系
                  </td>
                  <td>称谓</td>
                  <td>姓名</td>
                  <td>出生日期</td>
                  <td style="padding:2px 6px; text-align:justify;text-align-last:justify;word-break:keep-all;">政治 面貌</td>
                  <td colspan="3">工 作 单 位 及 职 务</td>
                </tr>
                <template v-if="item.personList">
                  <tr style="height: 40px;" v-for="(person, index) in item.personList" :key="index">
                    <td>{{ person.jtcy_chengwei }}</td>
                    <td>{{ person.jtcy_xingming }}</td>
                    <td>{{ person.jtcy_csrq }}</td>
                    <td>{{ person.jtcy_zzmm }}</td>
                    <td colspan="3">{{ person.jtcy_gzdwjzw }}</td>
                  </tr>
                  <!-- 默认展示剩余的空行 -->
                  <tr style="height: 40px;" v-for="index in (8 - item.personList.length)" :key="item.personList.length + index">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                  </tr>
                </template>
                <tr>
                  <td style="writing-mode:vertical-lr; height: 76px;" class="ptw48">呈报单位</td>
                  <td colspan="7">
                    <div class="cbdw">
  
                      <div class="cdbwtime">2025 年 1 月 15 日</div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="writing-mode:vertical-lr; height: 76px; padding: 16px 0;" class="ptw48 pt">审批机关
                    <div>意见</div>
                  </td>
                  <td colspan="3">
                    <div class="cbdw">
  
                      <div class="cdbwtime gz">
                        <div>（盖章）</div>
                        <div>2025 年 1 月 15 日</div>
                      </div>
                    </div>
                  </td>
                  <td style="writing-mode:vertical-lr; width: 42px; height: 76px;" class="ptw48 ">行政机关<br />任免意见</td>
                  <td colspan="3">
                    <div class="cbdw">
  
                      <div class="cdbwtime gz">
                        <div>（盖章）</div>
                        <div>2025 年 1 月 15 日</div>
                      </div>
                    </div>
                  </td>
                </tr>
              </thead>
            </table>
            <p style="padding-left: 32px;">填表人：</p>
          </div>
        </div>
      </div>
    </div>
  </template>
    
  <script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
        required: true,
      },
    },
    data() {
      return {
        myPrint: {
          id: 'myprintDom',
          extarCss: ''
        }
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      print() {
        this.$refs['printbtn'].click();
      }
    },
  }
  </script>
  
  <style>
  @page {
    size:auto;
    margin:0;
  }
  
  
  
  </style>
  
  <style lang="scss" scoped>
  .myprintbtn {
    display: none;
  }
  
  
  #myprintDom {
    position: fixed;
    min-width: 645px;
    left: 900000px;
    font-family: "宋体";
    p {
      margin: 16px 0;
    }
  }
  @media print {
    #myprintDom {
      position: static;
    }
  }
  .print-warp {
    margin: 10mm;
  }
  
  .print-tableOne {
    width: 100%;
    border: solid 1px #333;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 5px;
  }
  
  .print-tableTwo thead tr {
    color: #000;
  }
  
  .print-tableTwo {
    width: 100%;
    border: solid 1px #333;
    border-collapse: collapse;
    text-align: center;
  }
  
  .print-tableTwo thead tr {
    color: #000;
  }
  
  .primt-table {
    table-layout: fixed;
  }
  
  .primt-table thead tr td {
    padding: 2px 6px;
    height: 42px;
  }
  
  .primt-table thead tr .pt {
    text-align: justify;
    text-align-last: justify;
    word-break: keep-all;
  }
  
  .primt-table thead tr .ptw84 {
    width: 84px;
  }
  
  .primt-table thead tr .ptw36 {
    width: 36px;
  }
  
  .primt-table thead tr .ptw48 {
    width: 48px;
  }
  
  .primt-table thead tr .jj {
    height: 430px;
    text-align: left;
    white-space: word-wrap;
  }
  
  .primt-table thead tr .left {
    text-align: left;
  }
  
  .primt-table thead tr .cbdw {
    position: relative;
    height: 130px;
    text-align: left;
  }
  
  .primt-table thead tr .cbdw .cdbwtime {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  
  .primt-table thead tr .cbdw .cdbwtime.gz {
    text-align: center;
  }
  
  .print-title {
    font-size: 32px;
    color: 333;
    text-align: center;
  }
  </style>
    